<template>
  <view class="container">
    <view class="content">
      <!-- 内容区  -->
      <view class="details" style="padding: 20rpx" v-if="details != null && FoodTaskCategoryEnum != null">
        <uni-forms ref="form" :modelValue="details">
          <uni-forms-item class="form-item" label="做法分组" name="taskTypeId">
            <view class="lbl">做法分组：</view>
            <picker class="form-item-right" style="flex: 1" @change="bindPicker1Change" v-model="details.taskTypeId" :range="FoodTaskCategoryEnum" :range-key="'name'">
              <view class="uni-input">
                {{ FoodTaskCategoryEnum.find((item) => item.id == details.taskTypeId).name }}
              </view>
            </picker>
          </uni-forms-item>

          <uni-forms-item class="form-item" label="做法标签" name="name">
            <view class="lbl">做法标签:</view>
            <uni-easyinput trim clearable class="form-item-right" type="text" v-model="details.name" />
          </uni-forms-item>

          <uni-forms-item class="form-item" label="做法变价" name="addPriceWay">
            <view class="lbl">做法变价：</view>
            <picker class="form-item-right" @change="bindPicker2Change" :range-key="'value'" :range="addPriceWayList" v-model="details.addPriceWay">
              <view class="uni-input">
                {{ addPriceWayList[details.addPriceWay].value }}
              </view>
            </picker>
          </uni-forms-item>

          <uni-forms-item class="form-item" label="价格" name="price">
            <view class="lbl">价格:</view>
            <uni-easyinput trim clearable class="form-item-right" type="text" @blur="blurEvent" v-model="details.price" />

            <!--        <uni-number-box
              v-model="details.price"
              :min="0"
              :max="99999"
              :step="0.01"
            ></uni-number-box> -->
          </uni-forms-item>

          <uni-forms-item class="form-item" label="是否通用" name="currencyFlag">
            <view class="lbl">是否通用:</view>
            <!-- <radio-group
              class="form-item-right"
              name="currencyFlag"
              @change="radioChange"
            >
              <label style="margin-right: 30rpx">
                <radio :value="1" :checked="details.currencyFlag == 1" />
                <text>是</text>
              </label>
              <label>
                <radio :value="0" :checked="details.currencyFlag !== 1" />
                <text>否</text>
              </label>
            </radio-group> -->
            <u-radio-group v-model="details.currencyFlag">
              <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
              <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
            </u-radio-group>
          </uni-forms-item>
        </uni-forms>
        <view class="btn-group" style="display: flex; position: fixed; left: 15rpx; right: 15rpx; bottom: 0; height: 60px">
          <view
            @click="btnDelClick"
            style="
              display: flex;
              flex: 1;
              margin-right: 15px;
              align-items: center;
              justify-content: center;
              height: 49px;
              font-size: 18px;
              background-color: #f56c6c;
              letter-spacing: 3px;
              color: #fff;
              font-weight: bold;
              border-radius: 10px;
            "
            size="mini"
          >
            删除
          </view>
          <view
            @click="btnEditClick"
            style="
              display: flex;
              flex: 2;
              margin-left: 15px;
              align-items: center;
              justify-content: center;
              height: 49px;
              font-size: 18px;
              background-color: #f3c45d;
              letter-spacing: 3px;
              color: #fff;
              font-weight: bold;
              border-radius: 10px;
            "
            size="mini"
          >
            保存
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { toastIconEnum } from '../../../constants/uiConstants';
import { umodal, utoast } from '../../../utils/uniUtils.js';
import { isIntegerOrNumericStringOrEmpty } from '../../../utils/stringUtils.js';
import { onLoad } from '@dcloudio/uni-app';

import { reactive, onMounted, toRefs, getCurrentInstance } from '@vue/composition-api';

export default {
  name: 'editFoodCategory',

  setup() {
    // Vue生命周期
    onMounted(async () => {
      await GetFoodTaskCategory();
    });

    // 生命周期函数 小程序
    onLoad(async (option) => {
      data.id = option.id;
      data.details = await GetFoodTask({ id: option.id });
    });

    const { proxy } = getCurrentInstance();

    // 数据
    const data = reactive({
      FoodTaskCategoryEnum: null,
      id: 0,
      searchParam: {
        name: ''
      },
      prefixIconStyle: {
        fontSize: '24px'
      },
      activeStyle: {
        color: '#F3C45D'
      },
      pattern: {
        buttonColor: '#F3C45D'
      },
      tabMenus: [],
      leftMenus: null,
      currentCateIdx: 0, //左边默认分类
      addPriceWayList: [
        // 加价方式
        {
          id: 0,
          value: '不加价'
        },
        {
          id: 1,
          value: '固定加价'
        },
        {
          id: 2,
          value: '按重量加价'
        }
      ],
      details: null, //   做法详情
      disabled: false, // 禁用
      lock: false // 节流锁
    });

    /**
     * 查
     */
    /**
     * 获取做法
     */
    async function GetFoodTask(params = {}) {
      let {
        data: { list }
      } = await proxy.$api.GetFoodTask({
        pageNum: 1,
        pageSize: 9999,
        ...params
      });
      return list[0];
    }

    function bindPicker1Change(e) {
      console.log('detail', data.details);
      data.details.taskTypeId = data.FoodTaskCategoryEnum[e.detail.value].id;
    }

    /**
     * 获取做法分类
     */
    async function GetFoodTaskCategory() {
      let {
        data: { list }
      } = await proxy.$api.GetFoodTaskCategory({
        pageNum: 1,
        pageSize: 9999
      });
      data.FoodTaskCategoryEnum = list;
    }

    /**
     * 删
     */
    async function DelFoodTask() {
      return await proxy.$api.DelFoodTask({
        id: data.details.id
      });
    }

    async function btnDelClick() {
      if (data.details.foodCount != null && data.details.foodCount > 0) {
        await utoast('已关联菜品！', toastIconEnum.error);
        return;
      }
      const res = await umodal();
      // 确定删除
      if (res) {
        const result = await DelFoodTask();
        console.log(result);
        if (result.code != null && result.code == 0) {
          await utoast('删除成功！', toastIconEnum.success);
          data.disabled = true;
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/workbench/task/list'
            });
          }, 1000);
        } else {
          await utoast('删除失败！', toastIconEnum.error);
        }
      }
    }

    function blurEvent() {
      this.details.price = isNaN(parseFloat(this.details.price)) ? 0 : parseFloat(this.details.price);
    }
    /**
     * 改
     * @returns {Promise<void>}
     * @constructor
     */
    async function EditFoodTask() {
      return await proxy.$api.EditFoodTask(data.details);
    }

    /**
     * 编辑按钮点击事件
     * @param item
     */
    async function btnEditClick() {
      console.log('提交表单', data.details);
      if (!(await umodal('确认要提交吗？'))) {
        return;
      }
      data.details.name = data.details.name.trim();

      if (data.details.name.length == 0) {
        await utoast('名称为空!', 'error');
        return;
      }

      if (data.details.addPriceWay == null) {
        data.details.addPriceWay == 0;
      }

      if (!isIntegerOrNumericStringOrEmpty(data.details.addPriceWay)) {
        await utoast('加价必须为数字', 'error');
        return;
      }

      const res = await EditFoodTask();
      if (res?.code == 0) {
        await utoast('操作成功');
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/workbench/task/list'
          });
        }, 1000);
      } else {
        setTimeout(() => {
          console.log('fail', data.lock);
        }, 2000);
      }
    }

    function bindPicker2Change(e) {
      console.log('e-->', e);
      this.details.addPriceWay = this.addPriceWayList[e.detail.value].id;
    }

    function radioChange(e) {
      data.details.currencyFlag = e.detail.value;
    }

    return {
      ...toRefs(data),
      bindPicker1Change,
      btnDelClick,
      btnEditClick,
      bindPicker2Change,
      radioChange,
      blurEvent
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow-y: scroll;

  .form-item {
    display: flex;
    align-items: center;
    padding: 14rpx 0;

    .lbl {
      width: 80px;
      font-size: 14px;
    }

    .form-item-right {
      flex: 1;
    }
  }

  picker {
    flex: 1;
    border: 1px solid #cacaca;
    background-color: #fff;
    padding: 7rpx 10rpx;
    border-radius: 5px;
    position: relative;
  }
}
</style>
